


<template>
  <div>
    <van-sticky>
      <div class="top">
        <span class="gouwuche">购物车</span>

        <router-link to="/shoppingcart">
          <span class="done" @click="done">完成</span>
        </router-link>
        <hr style="margin-top:20px,color:rgba(137, 162, 162, 0.1)" />
      </div>
    </van-sticky>

    editshoppingcart

    <div v-for="(item, index) in goods" :key="item.id" v-lazy="item">
      <!-- <van-checkbox-group v-model="result" ref="checkboxGroup"> -->
      <van-card
        :id="item.id"
        :num="item.bujingvalue"
        :price="item.price"
        :desc="item.discrip"
        :title="item.shoptitle"
        :thumb="item.img"
        :tag="item.tag"
        :origin-price="item.originprice"
      >
        <template #tags>
          <van-tag plain type="danger">好用得很</van-tag>
        </template>
        <template #footer>
          <van-row>
            <van-stepper
              :id="item.id"
              v-model="item.bujingvalue"
              integer
              min="0"
            />
            <van-checkbox
              :name="item.id"
              shape="square"
              v-model="item.isChecked"
              @click="chose(index)"
            ></van-checkbox>

            {{ item.isChecked }}
          </van-row>
        </template>
      </van-card>
    </div>

    <van-goods-action class="bottom">
      <van-checkbox
        v-model="checked"
        @click="checkAll"
        class="quan"
        shape="square"
        >全选</van-checkbox
      >
      <van-button
        type="danger"
        class="delbtn"
        @click="dialog"
        v-model="isShowConfirm"
        >删除</van-button
      >
    </van-goods-action>

    <van-tabbar>
      <van-tabbar-item icon="home-o">首页</van-tabbar-item>
      <van-tabbar-item icon="apps-o">分类</van-tabbar-item>
      <van-tabbar-item icon="shopping-cart-o">购物车</van-tabbar-item>
      <van-tabbar-item icon="user-o">我的</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
// import Vue from 'vue';
// import { Dialog } from 'vant';
export default {
  data() {
    return {
      isShowConfirm: false,
      checked: false,
      msg: "",
      goods: [
        {
          id: 1,
          shoptitle: "商品标题888",
          discrip: "描述信息1",
          originprice: "2",
          img: "https://img01.yzcdn.cn/vant/ipad.jpeg",
          isChecked: false,
          num: 30,
          price: 10,
          tag: "热卖",
          bujingvalue: "1", //数量默认的值
        },
        {
          id: 2,
          shoptitle: "商品标题1",
          discrip: "描述信息1",
          originprice: "2",
          img: "https://img01.yzcdn.cn/vant/ipad.jpeg",
          isChecked: false,
          num: 30,
          price: 10.5,
          tag: "热卖",
          bujingvalue: "1",
        },
        {
          id: 3,
          shoptitle: "商品标题1",
          discrip: "描述信息1",
          originprice: "2",
          img: "https://img01.yzcdn.cn/vant/ipad.jpeg",
          isChecked: false,
          num: 30,
          price: 10,
          tag: "热卖",
          bujingvalue: "1",
        },
        {
          id: 4,
          shoptitle: "商品标题1",
          discrip: "描述信息1",
          originprice: "2",
          img: "https://img01.yzcdn.cn/vant/ipad.jpeg",
          isChecked: false,
          num: 30,
          price: 10,
          tag: "热卖",
          bujingvalue: "1",
        },
        {
          id: 5,
          shoptitle: "商品标题1",
          discrip: "描述信息1",
          originprice: "2",
          img: "https://img01.yzcdn.cn/vant/ipad.jpeg",
          isChecked: false,
          num: 30,
          price: 10,
          tag: "热卖",
          bujingvalue: "1",
        },
        {
          id: 6,
          shoptitle: "商品标题1",
          discrip: "描述信息1",
          originprice: "2",
          img: "https://img01.yzcdn.cn/vant/ipad.jpeg",
          isChecked: false,
          num: 30,
          price: 10,
          tag: "热卖",
          bujingvalue: "1",
        },
      ],
    };
  },
  components: {
    // [Dialog.Component.name]: Dialog.Component,
  },
  methods: {
    dialog() {
      console.log(this);
console.log( this.$dialog);
this.$dialog.confirm({
        title: "标题",
        message: "弹窗内容",
      }).then(res=>{
        console.log(res);
        // this.goods.forEach((item,index,_arr)=>{
        //   if(item.isChecked==true){

        //   }
        // })
        let newGgoods=[]
        newGgoods=this.goods.filter(item=>{
          return item.isChecked===false
        })
        this.goods=newGgoods
      })
          .catch(err => {
        console.log(err);

          // on cancel
        });

    },
  

    chose(index) {
      //  console.log( this.goods[index].isChecked);
      // console.log(this.goods[index].isChecked !== false);
      if (this.goods[index].isChecked !== false) {
        this.goods[index].isChecked = true;
      } else {
        this.goods[index].isChecked = false;
      }
    },

    onSubmit(values) {
      console.log("submit", values);
    },
    checkAll() {
      console.log(this.checked == false);
      if (this.checked !== false) {
        this.goods.forEach((item) => {
          item.isChecked = true;
          this.checked = true;
        });
      } else {
        this.goods.forEach((item) => {
          item.isChecked = false;
          this.checked = false;
        });
      }
    },

    done() {
      this.$router.push("/shoppingcart");
    },

    created() {
      console.log(this);
      console.log(this.result);
    },
    isdelete(id) {
      console.log(this.goods);
    },
  },
  computed: {
    totalPrice() {
      // 总价格=所有选中的商品的价格*数量
      let totalMoney = 0;
      let checkedGoods = [];

      checkedGoods = this.goods.filter((item) => {
        return item.isChecked === true;
      });
      checkedGoods.forEach((item) => {
        totalMoney += item.price * 100 * item.bujingvalue;
      });
     
      // console.log(this.newGgoods);
      return totalMoney;
    },
  },
};
</script>

<style>
.bottom {
  margin-bottom: 50px;
}
.van-submit-bar {
  bottom: 50px;
}
.van-button--mini {
  width: 30px;
}

.delbtn {
  width: 200px;
  text-align: center;
  margin-left: 80px;
}
.del {
  float: right;
}
.quan {
  margin-left: 20px;
}
.top {
  background-color: #fff;
  height: 50px;
  margin: 0;
  line-height: 40px;
}
.done {
  padding-right: 20px;
  float: right;
}
.gouwuche {
  margin-left: 60px;
}
.editbottom {
  position: absolute;
  bottom: 40px;
  width: 100%;
  border: 1px solid black;
  height: 50px;
  float: left;
  z-index: 999000;
}
</style>
